<template>
  <!-- 列表 -->
  <view>
    <view class="list-wrapper">
      <view class="list-item" v-for="(item, index) in list" :key="index" @click="toPage(item)">
        <view class="title fs-14 fw-b fc-333 ellipsis2 mb10">【{{typeList[item.questionsTypeId] || iconList[item.questionsType]}}】<span class="rich-text" v-html="item.questionsContent || item.content"></span></view>
        <view class="note mb10" v-if="active === '1'">
          <text class="fs-14 fc-333 ellipsis2">{{item.content}}</text>
        </view>
        <view class="data flex-wrap flex-middle fs-12 fc-999">
          <text class="flex-item">来自《{{item.practiceName || item.examName}}》</text>
          <text class="data-time" v-if="active !== '1'">{{item.createDate || item.updateDate}}</text>
          <!--                    <span class="data-btn-del" @click.stop="handleDelete(item)">删除</span>-->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

import {onLoad, onLaunch, onShow} from '@dcloudio/uni-app'
import {ref,toRefs, onMounted, watch, computed, getCurrentInstance} from 'vue';
const {$api, $uniPush, $toast, $dialog, $uniRedirectTo} = getCurrentInstance().proxy;
import {useGetters} from "@/store/useFun";
const {showTitle} = useGetters('siteInfo', ['showTitle'])
// 定义响应式数据
const iconList = ref({
  'T': '判断题',
  'R': '单选题',
  'M': '多选题',
  'F': '填空题',
  'A': '问答题'
});
const removeList = ref(['错题', '笔记', '收藏']);

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  active: {
    type: String,
    default: ''
  },
  vertical: { // 竖版显示
    type: Boolean,
    default: false
  },
  pageKey: { // 跳转id的key
    type: String,
    default: ''
  },
  progress: { // 是否显示课程学习进度（我的课程有效）
    type: Boolean,
    default: false
  },
  hideReco: {
    type: Boolean,
    default: false
  },
  typeList: {
    type: Array,
    default: () => []
  },
})
const {list, active, vertical, pageKey, progress, hideReco, typeList} = toRefs(props)

// 方法
const handleDelete = (item) => {
  $dialog.confirm({
    title: '提示',
    message: `是否删除该${removeList.value[active.value]}?`,
    confirmButtonColor: 'var(--color)',
    type: 'warning',
  }).then(res => {
    let promise;
    if (active.value === '0') {
      promise = $api.practice.errCancel({
        mistakesIds: item.mistakesId
      });
    } else if (active.value === '1') {
      promise = $api.practice.noteCancel({
        noteIds: item.noteId
      });
    } else if (active.value === '2') {
      promise = $api.practice.collectCancel({
        collectIds: item.collectId
      });
    }
    promise.then(res => {
      emit('searchList');
      $toast.success('删除成功');
    });
  }).catch(() => { });
};

const toPage = (e) => {
  if (active.value === '3') {
    console.log(111);
    $uniPush({
      name: 'practice-examError-id',
      params: {
        id: e.examId
      },
      query: {
        questionsRecordId: e.questionsRecordId,
        questionsId: e.paperQuestionsId
      },
    });
  } else {
    $uniPush({
      name: 'practice-noteInfo-id',
      params: {
        id: e.practiceId
      },
      query: {
        recordId: e.recordId,
        questionsId: e.paperQuestionsId
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.list-wrapper{
  flex-wrap: wrap;
  padding-bottom: 4px;
  .list-item{
    position: relative;
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    & + .list-item{
      margin-top: 10px;
    }
    .rich-text{
      font-size: 14px;
      line-height: 20px;
      :deep(text),:deep(view){
        display: inline;
      }
    }
    .note{
      padding: 10px;
      background: #F6F6F6;
    }
    .data-time{
      /*margin-right: 4px;
      &:after{
          margin-left: 4px;
          content: '|';
      }*/
    }
  }
}
</style>